<template>
  <div v-show="showHeatMap">
    <div id="heartMap">
      <p>热力图参数</p>
      <div>
        <label class="lb">热点半径(radius size):</label
        ><el-slider v-model="radius"></el-slider>
      </div>
      <div>
        <label class="lb">模糊尺寸(blur size):</label
        ><el-slider v-model="blur"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as map from './MapCom.vue'
var source = new ol.source.Vector({ wrapX: false })
var Heatmap = new ol.layer.Heatmap({ source: source })
export default {
  name: 'accidentMap',
  data() {
    return {
      radius: 22,
      blur: 20,
    }
  },
  computed: {
    ...mapState(['showHeatMap', 'map']),
  },
  watch: {
    radius: function (n, ol) {
      this.displayHeatMap()
    },
    blur: function (n, ol) {
      this.displayHeatMap()
    },
    showHeatMap: function (o, n) {
      if (!this.showHeatMap) {
        this.map.removeLayer(Heatmap)
        source.clear()
      } else {
        this.displayHeatMap()
      }
    },
    deep: true,
  },
  methods: {
    async displayHeatMap() {
      /* 1. 高亮显示所有摄像头点 */
      //创建一个用于查询的点形状
      let pointObj = new Zondy.Object.Point2D(114, 30)
      //设置查询点的搜索半径 (度)
      pointObj.nearDis = 2

      // 查询
      var queryStruct = new Zondy.Service.QueryFeatureStruct()
      //是否包含几何图形信息
      queryStruct.IncludeGeometry = true
      //是否包含属性信息
      queryStruct.IncludeAttribute = true
      //是否包含图形显示参数
      queryStruct.IncludeWebGraphic = false
      //指定查询规则
      var rule = new Zondy.Service.QueryFeatureRule({
        //是否将要素的可见性计算在内
        EnableDisplayCondition: false,
        //是否完全包含
        MustInside: false,
        //是否仅比较要素的外包矩形
        CompareRectOnly: false,
        //是否相交
        Intersect: true,
      })
      //实例化查询参数对象
      var queryParam = new Zondy.Service.QueryParameter({
        geometry: pointObj,
        resultFormat: 'json',
        struct: queryStruct,
        rule: rule,
      })
      //设置查询要素数目
      queryParam.recordNumber = 200

      var queryService = new Zondy.Service.QueryDocFeature(
        queryParam,
        'guanggu',
        '2',
        {
          ip: 'localhost',
          port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
        }
      )

      //执行查询操作，querySuccess为查询回调函数
      queryService.query(querySuccess, queryError)

      // 下面的函数会改变this指向, 所以这里接收一下现在的this, 方便后面使用
      var _this = this

      //查询成功回调
      function querySuccess(result) {
        // 重新渲染页面之前先清空图层
        source.clear()
        _this.map.removeLayer(Heatmap)
        /* console.log('显示摄像头成功', result); */
        var format = new Zondy.Format.PolygonJSON()
        //将MapGIS要素JSON反序列化为ol.Feature类型数组
        var features = format.read(result)
        var new_features = []
        for (var i in features) {
          var value = (-features[i].values_.values_.事件等级 + 10) / 10
          var position = features[i].getGeometry().getCoordinates()[0]
          var newFeature = createFeature([position[0], position[1]], value)
          new_features.push(newFeature)
        }
        source.addFeatures(new_features)
        //创建热力图层
        Heatmap = new ol.layer.Heatmap({
          source,
          blur: parseInt(_this.blur, 10),
          radius: parseInt(_this.radius, 10),
          weight: 'weight', //默认热力图层权值字段（0-1）
        })
        _this.map.addLayer(Heatmap)
      }

      //查询失败回调
      function queryError(e) {
        //停止进度条
        /* console.log('失败', e); */
      }

      function createFeature(coordinates, att) {
        var tFeature = new ol.Feature({
          geometry: new ol.geom['Point'](coordinates),
        })
        tFeature.set('weight', att)
        return tFeature
      }
    },
  },
}
</script>

<style>
#heartMap {
  z-index: 100;
  position: fixed;
  top: 70px;
  left: 30px;
  width: 200px;
  height: 110px;
  background-color: rgb(255, 255, 255, 50%);
  padding: 5px 10px;
  font-size: 12px;
  color: black;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
#heartMap p {
  margin-top: 4px;
  font-size: 20px;
  font-family: '微软雅黑';
  text-align: center;
}
#heartMap .lb {
  height: 26px;
  width: 50%;
  margin-left: 12px;
}
</style>
